<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            color: #fff;
        }
        img {
            display: block;
        }
        header {
            height: 50px;
            background-image: linear-gradient(to right, pink, purple);
            width: 100%;
            padding: 0 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box;
        }
        .avatar {
            border-radius: 50%;
            width: 30px;
            height: 30px;
            overflow: hidden;
        }
        .avatar img {
            height: 100%;
            width: auto;
        }
        .content-wrapper {
            height: calc(100vh - 100px);
            width: 100%;
            background-color: #f5f5f5;
            padding: 16px;
            box-sizing: border-box;
            overflow-y: auto;
        }
        .content-wrapper .item {
            height: auto;
            width: 100%;
            display: flex;
            margin: 32px 0;
        }
        .content-wrapper .item .content-container {
            flex: 1;
        }
        .content-wrapper .item .content {
            border-radius: 12px;
            padding: 16px;
            box-sizing: border-box;
            margin: 0 16px;
            position: relative;
            word-break: break-all;
            max-width: 100%;
        }
        .content-wrapper .item .content::before {
            content: "";
            position: absolute;
            display: block;
            top: 4px;
            height: 12px;
            width: 12px;
        }
        .content-wrapper .item .placeholder {
            width: 30px;
        }
        .content-wrapper .item.received .content {
            background-color: rgb(254, 150, 150);
            float: left;
        }
        .content-wrapper .item.sent .content {
            background-color: #fff;
            color: #000;
            float: right;
        }
        .content-wrapper .item.received .content::before {
            background-image: url("./img/corner01.png");
            left: -10px;
        }
        .content-wrapper .item.sent .content::before {
            background-image: url("./img/corner02.png");
            right: -10px;
        }
        .input-wrapper {
            height: 50px;
            display: flex;
            padding: 0 16px;
            align-items: center;
        }
        #send-btn {
            height: 30px;
            width: 60px;
            line-height: 30px;
            text-align: center;
            background-color: pink;
            border-radius: 4px;
        }
        #send-inp {
            flex: 1;
            height: 30px;
            margin: 0 16px;
            border: none;
            outline: none;
            background-color: #e9e9e9;
            border-radius: 4px;
            padding: 8px;
            box-sizing: border-box;
        }
        audio {
            display: none;
        }
        .loading {
            display: none;
        }
    </style>
</head>
<body>

    <audio autoplay controls src=""></audio>

    <header>
        <span>小思同学</span>
        <span class="loading">对方正在讲话...</span>
        <div class="avatar">
            <img src="./img/person01.png" alt="">
        </div>
    </header>
    <div class="content-wrapper">
        <!-- to fix -->
        <!-- <div class="item sent">
            <div class="placeholder"></div>
            <div class="content-container">
                <div class="content">嘿嘿</div>
            </div>
            <div class="avatar">
                <img src="./img/person02.png" alt="">
            </div>
        </div>
        <div class="item received">
            <div class="avatar">
                <img src="./img/person01.png" alt="">
            </div>
            <div class="content-container">
                <div class="content">xxxx</div>
            </div>
            <div class="placeholder"></div>
        </div> -->
    </div>
    <div class="input-wrapper">
        <div class="avatar">
            <img src="./img/person02.png" alt="">
        </div>
        <!-- <div class="send-inp-wrapper"> -->
            <input id="send-inp" type="text">
        <!-- </div> -->
        <div id="send-btn">发送</div>
    </div>

    <script src="./lib/jquery.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script>

        const url = 'http://www.liulongbin.top:3006/api/robot';

        // 发送按钮点击事件
        $('#send-btn').on('click', () => {
            // 显示loading
            $('.loading').show();
            // 取input的值 并移除两端空格
            const inpValue = $('#send-inp').val().trim();
            // 不允许发空白消息
            if (!inpValue) {
                return;
            }
            // 将input的值放入消息模板
            const el = $(`
                <div class="item sent">
                    <div class="placeholder"></div>
                    <div class="content-container">
                        <div class="content">${ inpValue }</div>
                    </div>
                    <div class="avatar">
                        <img src="./img/person02.png" alt="">
                    </div>
                </div>
            `);
            // 将新建的消息元素放入容器
            el.appendTo('.content-wrapper');
            // 清空input
            $('#send-inp').val('');
            // 处理滚动条
            $('.content-wrapper').scrollTop(99999);

            // 获取机器人回复
            axios({
                method: 'get',
                url,
                params: {
                    spoken: inpValue,
                },
            }).then((res) => {
                // 隐藏loading
                $('.loading').hide();
                // 将接口返回的值放入消息模板
                const el = $(`
                    <div class="item received">
                        <div class="avatar">
                            <img src="./img/person01.png" alt="">
                        </div>
                        <div class="content-container">
                            <div class="content">${ res.data.data.info.text }</div>
                        </div>
                        <div class="placeholder"></div>
                    </div>
                `);
                // 将新建的消息元素放入容器
                el.appendTo('.content-wrapper');
                // 处理滚动条
                $('.content-wrapper').scrollTop(99999);

                // 获取语音地址
                axios({
                    method: 'get',
                    url: 'http://www.liulongbin.top:3006/api/synthesize',
                    params: {
                        text: res.data.data.info.text
                    },
                }).then((res) => {
                    // 换audio标签的地址(换地址可以触发自动播放功能)
                    $('audio').attr({ src: res.data.voiceUrl });
                });

            }).catch((err) => {
                // 隐藏loading
                $('.loading').hide();
                // 失败提示
                alert('发送失败');
            });



        });

        // 按回车发送消息
        $('#send-inp').on('keyup', (e) => {
            if (e.keyCode === 13) {
                $('#send-btn').trigger('click');
            }
        });

    </script>
</body>
</html>